<template>
  <el-row>
    <el-col>
      <ClassifySearch></ClassifySearch>
      <el-table :data="ClassifyState.classifyTwoTable" border v-loading="ClassifyState.loading">
        <el-table-column label="id" prop="id" width="100px" align="center" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column label="最后修改时间" prop="updated" width="140px" align="center"> </el-table-column>
        <el-table-column label="一级分类名称" prop="name" min-width="110px" header-align="center"> </el-table-column>
        <el-table-column label="二级分类名称" prop="name2" min-width="110px" header-align="center"> </el-table-column>
        <el-table-column label="三级类数量" prop="classify_three_num" width="120px" align="center"> </el-table-column>
        <el-table-column label="状态" width="150px" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state" active-text="启用" inactive-text="停用" @change="editState($event,scope.row.id)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="310px" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row.id,scope.row.classify_one_id,scope.row.name2)">修改</el-button>
            <el-button type="warning" icon="el-icon-plus" @click="addTwoClassify(scope.row.id,scope.row.classify_one_id)">添加三级分类</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delOneClassify(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-col>
    <el-col>
      <AddClassify></AddClassify>
    </el-col>
  </el-row>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import AddClassify from '../components/AddClassify'
import ClassifySearch from '../components/ClassifySearch'
export default {
  //import引入的组件
  components: { AddClassify, ClassifySearch },
  //子组件引用父组件:data=data 方法@search=search使用this.emit('search', '参数');
  props: [],
  data () {
    return {
    };
  },
  computed: {
    ...mapState('Classify', { //使用如下 {{ ClassifyState.name }}  console.log(this.ClassifyState.name)
      ClassifyState: state => state
    }),
  },
  methods: {
    ...mapActions('Classify', [
      'list', 'classifyState', 'classifyDel', 'seachQuery'
    ]),
    /**点击修改按钮 */
    edit (id, classify_one_id, name2) {
      this.ClassifyState.addDialog = true;
      this.ClassifyState.classifyRadio = 2;
      this.ClassifyState.addClassifyForm.classifyOneSelect = classify_one_id;
      this.ClassifyState.addClassifyForm.classifyEditId = id;
      this.ClassifyState.addClassifyForm.classifyTwoVal = name2;
    },
    /**是否启用 */
    editState (state, id) {
      let params = {
        state: state,
        rank: 2,
        id: id
      }
      this['classifyState'](params)
    },
    /**添加三级分类 */
    addTwoClassify (id, classify_one_id) {
      this.ClassifyState.addDialog = true;
      this.ClassifyState.classifyRadio = 3;
      this.ClassifyState.addClassifyForm.classifyOneSelect = classify_one_id;
      this['seachQuery'](id);
    },
    /**删除 */
    delOneClassify (id) {
      let params = {
        id: id,
        rank: 2
      }
      this['classifyDel'](params)
    }
  },
  created () {
  },
  mounted () {
  },
};
</script>

<style></style>